<template>
  <div>
    <home-main-slider></home-main-slider>
    <home-main-item></home-main-item>
    <home-main-knowledge></home-main-knowledge>
    <el-divider style="margin-top: 51px; margin-bottom: 51px" content-position="center">
      <p style="
          font-size: 20px;
          font-weight: normal;
          font-family: 'Courier New', Courier, monospace;
        ">
        热点文章推送
      </p>
    </el-divider>
    <div class="ArticleBody">
      <div class="ArticleLeft">
        <div class="box">
          <p>{{ this.ArticleList[0].title }}</p>
          <p>{{ this.ArticleList[1].title }}</p>
          <p>{{ this.ArticleList[2].title }}</p>
          <p>{{ this.ArticleList[3].title }}</p>
          <p>{{ this.ArticleList[4].title }}</p>
          <p>{{ this.ArticleList[5].title }}</p>
          <p>{{ this.ArticleList[6].title }}</p>
          <p>{{ this.ArticleList[7].title }}</p>
          <p>{{ this.ArticleList[8].title }}</p>
          <p>{{ this.ArticleList[9].title }}</p>
          <p>{{ this.ArticleList[10].title }}</p>
        </div>
      </div>
      <div class="ArticleContainer">
        <div class="ArticleCard">
          <div class="img-box">
            <img :src="this.ArticleList[2].image" alt="" />
          </div>
          <div class="title1">
            <h3>{{ this.ArticleList[2].title }}</h3>
          </div>
          <div class="text-box">
            <p class="ArticleContent" rows="5">{{ this.ArticleList[2].content }}</p>
            <span><a :href="this.ArticleList[2].url">查看详情></a></span>
          </div>
        </div>
        <div class="ArticleCard">
          <div class="img-box">
            <img :src="this.ArticleList[3].image" alt="" />
          </div>
          <div class="title1">
            <h3>{{ this.ArticleList[3].title }}</h3>
          </div>
          <div class="text-box">
            <p class="ArticleContent">{{ this.ArticleList[3].content }}</p>
            <span><a :href="this.ArticleList[3].url">查看详情></a></span>
          </div>
        </div>
      </div>
    </div>

    <el-footer>
      <div class="part1">
        <h2>联系我们</h2>
        <h4>公司地址：XXXXXXXXXXXXXXXXXXX</h4>
        <h4>联系方式：XXXXXXXXXXXX</h4>
        <h4>电子邮件：XXXXXXXXXXXXXXXXXXX</h4>
      </div>
      <div class="part2">
        <img src="@/assets/picture1.jpg">
      </div>

    </el-footer>

  </div>
</template>
<script>
import { getRandomFlowerKnowledgeList } from '@/api/flowerKnowledge';
import { getRandomArticleList } from '@/api/article';
import { extractFirstUrl } from '@/utils/ArticleUtil';
import { getRandomItemList } from '@/api/item';
import homeMainSlider from "@/components/front/homeMainSlider.vue";
import homeMainKnowledge from "@/components/front/homeMainKnowledge.vue";
import homeMainItem from "@/components/front/homeMainItem.vue";
export default {
  components:{
    homeMainSlider,
    homeMainKnowledge,
    homeMainItem,
  },
  data() {
    return {
      ArticleList: [
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
        {
          title: "",
          content: "",
          url: "",
          image: "",
        },
      ],
      ArticleDefaultImg:[
        "https://img0.baidu.com/it/u=4132262126,2751706416&fm=253&fmt=auto&app=138&f=JPEG?w=755&h=500",
        "https://img2.baidu.com/it/u=2556067373,1777158494&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=3151843334,303660808&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=3869322874,2576857354&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",

      ]
    };
  },
  methods: {
    getRandomArticle() {
      var params = {
        count: Number(10)
      }
      return getRandomArticleList(params)
        .then((response) => {
          var getData = response.data.data
          for (var article in getData) {
            this.ArticleList[article].title = getData[article].title

            var url=extractFirstUrl(getData[article].content)
            if(url!==null){
              this.ArticleList[article].image=url
            }
            else{
              this.ArticleList[article].image=this.ArticleDefaultImg[Math.round(Math.random()*(this.ArticleDefaultImg.length-1))]
            }
            //this.ArticleList[article].image=getData[article].picture

            
            this.ArticleList[article].content = getData[article].content
            //this.ArticleList[knowledge].url=
          }
        })
    },
    
  },
  mounted: function () {
    this.getRandomArticle()
  }
};
</script>
<style scoped>
.ArticleBody {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 450px;
  margin-top: 40px;
}

.ArticleContainer {
position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    background: linear-gradient(271deg, #fbf0c359, #e8ffca00);
    height: 450px;
    width: 700px;
}

.ArticleContainer .ArticleCard {
  position: relative;
  max-width: 230px;
  height: 215px;
  background-color: #fff;
  margin: 30px 15px;
  padding: 20px 15px;
  border-radius: 5px;
  box-shadow: 0 5px 200px rgba(0, 0, 0, 0.1);
  background: linear-gradient(312deg, #e08f769e, #fff);
  transition: 0.3s ease-in-out;
}

.ArticleContainer .ArticleCard:hover {
  height: 400px;
}

.ArticleContainer .ArticleCard .img-box {
  position: relative;
  width: 230px;
  height: 135px;
  border-radius: 5px;
  overflow: hidden;
  top: -60px;
  z-index: 1;
}

.ArticleContainer .ArticleCard .img-box img {
  width: 100%;
}

.ArticleContainer .ArticleCard .title1 {
  position: relative;
  margin-top: -50px;
  padding: 10px 15px;
}

.ArticleContainer .ArticleCard .text-box {
  position: relative;
  margin-top: -50px;
  padding: 10px 15px;
  text-align: center;
  color: #111;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s ease-in-out;
}


.ArticleContainer .ArticleCard:hover .text-box {
  visibility: visible;
  opacity: 1;
  margin-top: -40px;
  transition-delay: 0.2s;
}


.ArticleContent {
  text-align: left;
  line-height: 25px;
  margin-top: 10px;
  color: #555;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-footer {
  margin-top: 30px;
    background: #db8b6a99;
    height: 180px;
}

.part1 h2 {
  font-family: 'Courier New', Courier, monospace;
    color: #8d3838;
    margin-left: 23%;
}

.part1 h4 {
  font-family: 'Courier New', Courier, monospace;
  color: #8d3838;
  margin-left: 23%;
}

.part1 {
  float: left;
  width: 70%;
}

.part2 {
  float: right;
  width: 30%;
}

.part2 img {
  margin-left: 23%;
    margin-top: 11px;
    height: 159px;
    width: 129px;
    opacity: 0.5;

}
.ArticleLeft{
background: linear-gradient(91deg, #bc46034a, #e8ffca00);
    height: 450px;
    width: 700px;
}
.box{
width: 360px;
    height: 410px;
    margin-top: 22px;
    margin-left: 160px;
    display: flex;
    flex-direction: column;
}
.box p{
  margin-top: 7px;
    margin-bottom: 7px;
    cursor: pointer;
    font-size: 18px;
    border-bottom: 1px solid lightgray;
    font-family: cursive;
}
</style>


